<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>找回密码</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!--说明： 分为三个大模块是按照步骤，最开始只显示找回账号DOM，点击下一步后切换到下一个容器，上一个不显示，依次类推 -->
  <div class="title">
    <span class="active"><i>1</i>输入找回账号</span>
    <span><i>2</i>回答密保问题</span>
    <span><i>3</i>重置密码</span>
  </div>
  <div class="box">
    <div class="input-item">
      <label>请输入手机号：</label>
      <input type="text" id="phone">
    </div>
    <button id="btn1">下一步</button>
  </div>
  <!----------------------------------------------------->
  <br>
  <hr>
  <div class="title">
    <span><i>1</i>输入找回账号</span>
    <span class="active"><i>2</i>回答密保问题</span>
    <span><i>3</i>重置密码</span>
  </div>
  <div class="box">
    <div class="input-item">
      <label> 用户名：</label>
      <input type="text" value="" disabled>
    </div>
    <div class="input-item">
      <label> 手机号：</label>
      <input type="text" value="" disabled>
    </div>
    <div class="input-item">
      <label>密保问题：</label>
      <input type="text" value="" disabled>
    </div>
    <div class="input-item">
      <label>密保答案：</label>
      <input type="text" id="answer">
    </div>
    <button>上一步</button>
    <button id="btn2">下一步</button>
  </div>
  <!----------------------------------------------------->
  <br>
  <hr>
  <div class="title">
    <span><i>1</i>输入找回账号</span>
    <span><i>2</i>回答密保问题</span>
    <span class="active"><i>3</i>重置密码</span>
  </div>
  <div class="box">
    <div class="input-item">
      <label>请输入新密码：</label>
      <input type="text" id="password">
    </div>
    <button>上一步</button>
    <button id="btn3">立即重置</button>
  </div>

</body>
<!-- 获取axios文件 -->
<script src="../axios.js"></script>
<script>
  // 根路径配置，后续url后地址不需要加根路径
  axios.defaults.baseURL = 'http://124.223.14.236:3001/api'
  // 获取对象
  const phone = document.querySelector('#phone')
  const btn1 = document.querySelector('#btn1')
  const btn2 = document.querySelector('#btn2')
  const btn3 = document.querySelector('#btn3')
  const disabled = document.querySelectorAll("[disabled]")
  const answer = document.querySelector('#answer')
  const password = document.querySelector('#password')
  // 声明一个用户变量来接受
  let userData = ''
  // 输入手机号模块
  // 点击下一步发起ajax请求校验
  btn1.addEventListener('click', async (e) => {
    e.preventDefault()
    if (!phone.value) return alert('请输入手机号')
    const { data: { data } } = await axios({
      url: '/user/findPwd',
      params: { phone: phone.value }
    })
    console.log(data)
    // 校验密保问题模块 点击下一步 发起重置密码请求
    let answered
    disabled[0].value = data.username
    disabled[1].value = data.phone
    disabled[2].value = data.question
    btn2.addEventListener('click', (e) => {
      e.preventDefault()
      // 接口无密保答案返回值 ，所以手动输入一个,下一步校验
      if (!answer.value) return alert('请输入密保')
      answered = answer.value
    })
    // 重置密码 
    btn3.addEventListener('click', async (e) => {
      e.preventDefault
      const res = await axios({
        method: 'post',
        url: '/user/resetPwd',
        data: {
          id: data.id + '',
          answer: answered,
          password: password.value
        }
      })
      console.log(res);
    })
  })




</script>

</html>